<script setup>
	import OldModal from './components/innercom/OldModal.vue';
	import NewModal from './components/innercom/NewModal.vue';
	import Modal from './components/innercom/Modal.vue';
	import {
		ref
	} from 'vue';
	const showModal = ref(false)
</script>

<template>
	<div class="outer">
		<h3>Tooltips with Vue 3</h3>
		<div>
			<OldModal />
		</div>
	</div>

	<div class="outer">
		<h3>Tooltips with Vue 3 Teleport</h3>
		<div>
			<NewModal></NewModal>
		</div>
	</div>

	<button id="show-modal" @click="showModal = true">Show Modal</button>

	<Teleport to="body">
		<!-- 使用这个 modal 组件，传入 prop -->
		<modal :show="showModal" @close="showModal = false">
			<template #header>
				<h3>Custom Header</h3>
			</template>
		</modal>
	</Teleport>

</template>

<style>

</style>